<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>华为商城</title>
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/banner.css">
    <link rel="stylesheet" href="./css/shoplist.css">
    <style>
        .header{
            position:sticky;
            top: 0;
            z-index: 9999;
            background-color: white;
        }
        .header .header-main{
            width: 1200px;
            height: 74px;
            margin: 0 auto;
        }
        .header .header-main .log{
            width: 103px;
            height: 74px;
        }
        .label-list{
            margin-top: 70px;
        }
        .label-main{
            width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
        }
        .label-main .label{
            text-align: center;
        }
        .label-main .label img{
            width: 48px;
            height: 48px;
        }
        .label-main .label p{
            margin-top: 10px;
            padding: 0 28px;
            text-align: center;
            font-size: 14px;
        }
        .advertisement{
            background-color: rgb(232,232,232);
            transition: all 0.3s ease;
        }
        .advertisement-main{
            background-image: url(./img/advertisement.webp);
            width: 1422px;
            height: 90px;
            background-position: center;
            background-size: 100%;
            margin: 0 auto;
            position: relative;
            transition: all 0.3s ease;
        }
        .advertisement-main .btn{
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            color: aliceblue;
            background-color: rgba(156, 152, 152,0.5);
            position: absolute;
            right: 0;
            top: 0;
            cursor: pointer;
            transition: all 0.3s ease;
        }
    </style>
</head>
<body>
    <div class="advertisement">
        <div class="advertisement-main">
            <div class="btn">X</div>
        </div>
    </div>
    <div class="header">
        <div class="header-main">
            <img src="./img/logo_app.png" alt="" class="log">
        </div>
    </div>
    <div class="banner">
        <div class="images">
            <ul>
            </ul>
        </div>
        <div class="box">
            <ul>
                <li data-index="0">平板</li>
                <li data-index="1">电脑</li>
                <li data-index="2">手机</li>
                <li data-index="3">随身听</li>
                <li data-index="4">耳机</li>
                <li data-index="5">音响</li>
                <li data-index="6">主机</li>
                <li data-index="7">USB</li>
                <li data-index="8">全部</li>
                <li data-index="8">全部</li>
            </ul>
            <div class="box-main"></div>
        </div>
        <div class="btns">
            <div class="btn-left"><</div>
            <div class="btn-right">&gt;</div>
        </div>
        <div class="dians">
        </div>
    </div>
    <div class="label-list">
        <div class="label-main">
            <div class="label">
                <img src="./img/商城.webp" alt="">
                <p>会员频道</p>
            </div>
            <div class="label">
                <img src="./img/商城.webp" alt="">
                <p>会员频道</p>
            </div>
            <div class="label">
                <img src="./img/商城.webp" alt="">
                <p>会员频道</p>
            </div>
            <div class="label">
                <img src="./img/商城.webp" alt="">
                <p>会员频道</p>
            </div>
            <div class="label">
                <img src="./img/商城.webp" alt="">
                <p>会员频道</p>
            </div>
            <div class="label">
                <img src="./img/商城.webp" alt="">
                <p>会员频道</p>
            </div>
        </div>
    </div>
    <div class="warper">
        <div class="crumbs">
            <span class="item">首页</span>
            <span>&gt;</span>
            <span class="item">手机</span>
        </div>
        <div class="operation">
            <div class="category">
                <ul>
                    <li>
                        分类：
                    </li>
                    <li>
                        <span class="checked">笔记本</span>
                    </li>
                    <li>
                        <span>台式机</span>
                    </li>
                    <li>
                        <span>显示屏</span>
                    </li>
                </ul>
            </div>
            <div class="discount">
                <ul>
                    <li>优惠：</li>
                    <li class="item">
                        <span>分期免息</span>
                    </li>
                    <li class="item">
                        <span>赠送积分</span>
                    </li>
                    <li class="item">
                        <span>限时特价</span>
                    </li>
                </ul>
            </div>
            <div class="sort">
                <ul>
                    <li>排序：</li>
                    <li>
                        <span class="checked">综合</span>
                    </li>
                    <li>
                        <span>最新</span>
                    </li>
                    <li>
                        <span>评论数</span>
                    </li>
                    <li>
                        <span>价格</span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="shop-main">
            <ul class="shop-body">
            </ul>
        </div>
    </div>
    <script src="./json/banner.js"></script>
    <script src="./json/data.js"></script>
    <script src="./js/bannerCreate.js"></script>
    <script src="./js/shopCreate.js"></script>
    <script>
        const adv =document.querySelector('.advertisement');
        adv.addEventListener('click',function(e){
            if(e.target.classList.contains('btn')){
                this.style.marginTop = "-90px";
                setTimeout(function(){
                    this.remove();
                },200)
            }
        })
        // 动态列表
        const box = document.querySelector('.box');
        const box_main = document.querySelector('.box-main');
        box.addEventListener('mouseover',function(){
          box_main.style.width = '500px';
        })
        box.addEventListener('mouseout',function(){
            box_main.style.width = '0px';
        })
    </script>
</body>
</html>